<!--
 * @Description: 
 * @Version: 1.668
 * @Autor: 地虎降天龙
 * @Date: 2024-05-30 19:13:33
 * @LastEditors: 地虎降天龙
 * @LastEditTime: 2025-09-04 10:20:36
-->
<template>
    <div class="go-tables-basic">
        <n-input v-model:value="inputData" placeholder="请输入信息" :style="`display: ${inputShow}`" style="margin-bottom: 5px; float: right; width: 240px">
            <template #prefix>
                <n-icon :component="SearchIcon" />
            </template>
        </n-input>
        <n-data-table
            :style="`
      width: ${w}px;
      height: ${h}px;
      font-size: ${option.style.fontSize}px;
      border-width: ${option.style.border === 'on' ? option.style.borderWidth : 0}px;
      border-color: ${option.style.borderColor};
      border-style: ${option.style.borderStyle}`"
            :bordered="option.style.border === 'on'"
            :single-column="option.style.singleColumn === 'on'"
            :single-line="option.style.singleLine === 'on'"
            :bottom-bordered="option.style.bottomBordered === 'on'"
            :striped="option.style.striped === 'on'"
            :max-height="h"
            size="small"
            :columns="option.dataset.dimensions"
            :data="filterData"
            :pagination="pagination"
        />
    </div>
</template>

<script setup lang="ts">
import { computed, PropType, toRefs, watch, reactive, ref } from 'vue'
import { CreateComponentType } from 'PLS/goView/lib/packages/index.d'
import { icon } from 'PLS/goView/lib/gPlugins/'
import { useChartEditStore } from 'PLS/goView/stores/chartEditStore'
import { useChartDataFetch } from 'PLS/goView/lib/gHooks/'


const props = defineProps({
    chartConfig: {
        type: Object as PropType<CreateComponentType>,
        required: true,
    },
})

const { SearchIcon } = icon.ionicons5

//查询字段
const inputData = ref('')
//前台过滤
const filterData = computed(() => {
    return option?.dataset?.source?.filter((item: any) => {
        return Object.values(item).some((val) => {
            return String(val).toLowerCase().includes(inputData.value.toLowerCase())
        })
    })
})

const { align, pagination, inputShow } = toRefs(props.chartConfig.option)

pagination.value.onChange = (page: number) => {
    pagination.value.page = page
}

const { w, h } = toRefs(props.chartConfig.attr)

const option = reactive({
    dataset: props.chartConfig.option.dataset,
    style: props.chartConfig.option.style,
})

watch(
    () => props.chartConfig.option.dataset,
    (newData: any) => {
        option.dataset = newData
        option?.dataset?.dimensions?.forEach((header: any) => {
            header.align = align.value
        })
    },
    {
        immediate: true,
        deep: true,
    },
)

// setdata 数据监听与更改
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
  props.chartConfig.option.dataset = newData
})

</script>

<style lang="scss" scoped>
@include go('tables-basic') {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end;
}
</style>
